<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>GPS设备展示</title>
    <!-- 引入样式 -->
    <script src="js/axios.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/element-ui.js"></script>

    <!-- 高德 js-->
    <!-- <script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=451c3ebfa64c14097c3352938dc5b9a4'></script> -->
    <script type="text/javascript" src="js/key.js"></script>
    <!-- UI组件库 1.0 -->
    <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>

    <!-- 引入样式 -->
    <!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <link rel="stylesheet" href="css/element-ui.css">
    <link rel="stylesheet" href="css/index.css">


</head>
<body>
<div id="app">
    <el-container>
        <!-- aside 列表 -->
        <el-aside width="200px">
            <h1>菜单列表</h1>
            <el-row class="tac">
                <el-col :span="1">
                    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen"
                             @close="handleClose" background-color="#D3DCE6">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>GPS设备</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item v-for="(item, key, index) in devList" :index="item.msgPhone"
                                              v-if="isDevShow" @click="clickDev(item)"><span
                                        class="devListClass">{{item.msgPhone}}</span>
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span>系统配置</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="2-1"><span class="devListClass"
                                                                @click="devManage()">设备管理</span></el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-col>
            </el-row>
        </el-aside>


        <el-container>


            <!-- head 日期 -->
            <el-header>
                <div v-if="headShow==1">GPS系统</span></div>
                <div v-else-if="headShow==2">
                    <span class="demonstration">日期选择</span>
                    <el-date-picker v-model="time" align="right" type="date" placeholder="选择日期"
                                    value-format="yyyy-MM-dd" :picker-options="pickerOptions1" @change="selectTime">
                    </el-date-picker>
                    <el-radio-group v-model="mapOrDataShow" class="mapOrDataShow">
                        <el-radio-button label="1">地图模式</el-radio-button>
                        <el-radio-button label="2">数据模式</el-radio-button>
                    </el-radio-group>
                </div>
                <div v-else><span>设备管理</span></div>
            </el-header>


            <!-- main 地图 1gps设备 2数据 3设备管理 -->

            <el-main :style="defaultHeight">
                <div id="mainMap" v-show="1==mapOrDataShow"></div>
                <div v-show="2==mapOrDataShow">
                    <el-table :data="gpsData">
                        <el-table-column prop="id" label="id" width="140">
                        </el-table-column>
                        <el-table-column prop="msgPhone" label="终端号" width="140">
                        </el-table-column>
                        <el-table-column prop="longitude" label="经度" width="120">
                        </el-table-column>
                        <el-table-column prop="latitude" label="纬度">
                        </el-table-column>
                        <el-table-column prop="oldNext" label="数据包原始">
                        </el-table-column>
                        <el-table-column prop="createTime" label="创建时间">
                        </el-table-column>
                    </el-table>
                </div>
                <div v-show="3==mapOrDataShow">
                    <table>
                        <thead>
                        <tr>
                            <th>id</th>
                            <th>终端号</th>
                            <th>备注</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item, key, index) in devList" :key="item.id" v-if="isDevShow">
                            <td>{{item.id}}</td>
                            <td @click="clickDev(item)">{{item.msgPhone}}</td>
                            <td>{{item.describe}}</td>
                            <td>{{item.createTime}}</td>
                            <td>
                                <span @click="devChange(item)">编辑</span>
                                <span @click="devDel(item)">删除</span>
                            </td>
                        </tr>

                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="5">设备数量：{{devList.length}}</td>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </el-main>


            <!-- footer 底部 -->
            <el-footer>JT808_GPS</el-footer>
        </el-container>
    </el-container>
</div>

<script>
    //定义高德gps全局对象
    let map;
    let pathSimplifierIns;

    // let url = "http://127.0.0.1:7777";
    let url = "http://175.178.66.143:7777";

    new Vue({
        el: '#app',
        data: function() {
            return {
                selectMsgPhone: "",
                /*设备数据*/
                devList: new Array(),
                //head显示：1默认头，2.gps数据，3.设备管理
                headShow: 1,
                //main地图和数据切换：1地图 或2的数据 3.设备管理
                mapOrDataShow: 1,
                //查询时间
                time: '',

                /*gps数据*/
                gpsData: [{
                    "id": 1,
                    "msgPhone": "014141138693",
                    "longitude": 114.027616,
                    "latitude": 22.53795,
                    "createTime": "2022-05-13 13:41:40",
                    "updateTime": "2022-05-13 13:41:40",
                    "byteNext": "7EC97E"
                }, {
                    "id": 1,
                    "msgPhone": "014141138693",
                    "longitude": 114.027616,
                    "latitude": 22.53795,
                    "createTime": "2022-05-13 13:41:45",
                    "updateTime": "2022-05-13 13:41:45",
                    "byteNext": "7EC97E"
                }],
                /*地图数据*/
                mapData: [{
                    msgPhone: '199',
                    points: [{
                        time: "2022-05-13 13:41:41",
                        lnglat: [116.405289, 39.904987]
                    }, {
                        time: "2022-05-13 13:41:42",
                        lnglat: [113.964458, 40.54664]
                    },
                        {
                            time: "2022-05-13 13:41:43",
                            lnglat: [112.964458, 41.54664]
                        },
                        {
                            time: "2022-05-13 13:41:44",
                            lnglat: [111.964458, 43.54664]
                        }
                    ]
                }],
                //默认不展开设备
                isDevShow: false,
                isCollapse: true,
                //自动调节大小
                defaultHeight: {
                    height: ""
                },

                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                socketState: false,
                activeNumber: 0
            }
        },

        mounted() {
            this.lodMap();
            this.getDev();
            this.timeDefault();
        },
        created() {
            //页面创建时执行一次getHeight进行赋值，顺道绑定resize事件
            window.addEventListener("resize", this.getHeight);
            this.getHeight();
        },
        computed: {

        },
        methods: {
            //定义方法，获取高度减去头尾
            getHeight() {
                this.defaultHeight.height = window.innerHeight - 120 + "px";
            },
            //菜单折叠
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
                this.isDevShow = true;
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },

            //加载地图
            lodMap() {
                map = new AMap.Map('mainMap', {
                    zoom: 5
                });
                console.log("加载地图");
                AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
                    if (!PathSimplifier.supportCanvas) {
                        alert('当前环境不支持 Canvas！');
                        return;
                    }
                    //赋值全局变量
                    pathSimplifierIns = new PathSimplifier({
                        zIndex: 100,
                        //autoSetFitView:false,
                        map: map, //所属的地图实例
                        // 遍历数据
                        getPath: function(pathData, pathIndex) {
                            let points = pathData.points,
                                lnglatList = [];
                            for (let i = 0, len = points.length; i < len; i++) {
                                lnglatList.push(points[i].lnglat);
                            }
                            return lnglatList;
                        },
                        //展示数据
                        getHoverTitle: function(pathData, pathIndex, pointIndex) {
                            if (pointIndex >= 0) {
                                //point
                                let index = 1;
                                index += pointIndex;
                                return "当前点位:" + index + "," + "时间：" + pathData.points[
                                    pointIndex].time;
                            }
                            return "设备号:" + pathData.msgPhone + '，点位数:' + pathData.points
                                .length;
                        },
                        renderOptions: {
                            renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
                        }
                    });
                    window.pathSimplifierIns = pathSimplifierIns;
                });
            },
            //获取gps设备结合
            getDev() {
                let urlPath = url + "/dev/getDev";
                axios
                    .get(urlPath)
                    .then(response => (this.devList = response.data.data, console.log(this.devList)))
                    .catch(function(error) { // 请求失败处理
                        console.log(error);
                    });
            },

            //选中时间
            selectTime() {
                this.getGpsData(this.selectMsgPhone, this.time);
            },
            //获取gps数据
            getGpsData(msgPhone, date) {
                let urlPath = url + "/gps/getGps";
                axios
                    .get(urlPath + "?date=" + date + "&msgPhone=" + msgPhone)
                    .then(response => (this.setData(response.data.data, msgPhone)))
                    .catch(function(error) { // 请求失败处理
                        console.log(error);
                    });
            },
            /*设置数据*/
            setData(gpsData, msgPhone) {
                this.gpsData = gpsData;
                this.mapData[0].msgPhone = msgPhone;

                let newPoints = new Array();
                for (let index in this.gpsData) {
                    console.log(index)
                    let p = {
                        time: this.gpsData[index].createTime,
                        lnglat: [this.gpsData[index].longitude, this.gpsData[index].latitude]
                    };
                    newPoints.push(p);
                };
                this.mapData[0].points = newPoints;
                // gpsData封装mapData
                pathSimplifierIns.setData(this.mapData);
                pathSimplifierIns.setSelectedPathIndex(0);
                pathSimplifierIns.on('pointClick', function(e, info) {
                    console.log('Click: ' + info.pathData.points[info.pointIndex].msgPhone);
                });
            },
            // 默认时间
            timeDefault() {
                let nowDate = new Date();
                let date = {
                    year: nowDate.getFullYear(),
                    month: ((nowDate.getMonth() + 1) > 9) ? nowDate.getMonth() + 1 : "0" + (nowDate
                        .getMonth() + 1),
                    date: (nowDate.getDate() > 9) ? nowDate.getDate() : "0" + nowDate.getDate(),
                }
                this.time = date.year + '-' + date.month + '-' + date.date;
            },

            //点击设备
            clickDev(item) {
                this.headShow = 2;
                this.mapOrDataShow = 1;
                this.selectMsgPhone = item.msgPhone;
                //获取数据
                this.gpsData = this.getGpsData(this.selectMsgPhone, this.time);
            },
            // 点击设备管理
            devManage() {
                this.headShow = 3;
                this.mapOrDataShow = 3;
            },
            devChange(item) {
                alert("修改" + item.msgPhone);
            },
            devDel(item) {
                alert("删除" + item.msgPhone);
            }

        }
    })
</script>
</body>
</html>
